<template>
	<view class="myPages" :style="{paddingTop: `${search.top+search.height+10}px`}">
		<myHeard :search="search" :title="title" @goPath="goBack"></myHeard>

		<!-- 订单区 -->
		<view class="myPages__mainForm">

			<view class="myPages__mainFormMain">
				<view v-for="(item,index) in salesArr" :key="index">
					<view class="myPages__mainFormMainItem" v-if="item.productType==10">
						<view class="myPages__mainFormMainItemName">{{item.productName}}</view>
						<view class="myPages__mainFormMainItemBody">
							<view class="myPages__mainFormMainItemBodyTop">
								<view class="myPages__mainFormMainItemBodyTopImgBox">
									<image @click.stop="ff_previewImage(item.productImg)"
										class="myPages__mainFormMainItemBodyTopImgs myPages__mainFormMainItemBodyTopImgss" :src="item.productImg">
									</image>
								</view>
								<view class="myPages__mainFormMainItemBodyBottomx">
									<p>{{item.productSku}}</p>
									<view class="myPages__mainFormMainItemBodyBottomxItems">¥{{item.price}}
										<view class="myHandbag__mainItemCenBoxJjieMainNum">
											x<span>{{item.productNum}}</span>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="partOrderProductList.length">
					<view class="myPages__mainFormMainItem">
						<view class="myPages__mainFormMainItemName">手表配件</view>
						<view class="myPages__mainFormMainItemBody">
							<view class="myPages__mainFormMainItemBodyTop" v-for="(item,index) in partOrderProductList"
								:key="index">
								<view @click.stop="ff_previewImage(item.productImg)"
									class="myPages__mainFormMainItemBodyTopImgBox">
									<image class="ssmyPages__mainFormMainItemBodyTopImgs" :src="item.productImg">
									</image>
								</view>
								<view class="myPages__mainFormMainItemBodyBottomx">
									<p>{{item.productSku}}</p>
									<view class="myPages__mainFormMainItemBodyBottomxItems">¥{{item.price}}
										<view class="myHandbag__mainItemCenBoxJjieMainNum">
											x<span>{{item.productNum}}</span>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="myPages__mainFormMainButtom">
					<view class="myPages__mainFormMainButtomText">共{{salesArr | ff_cases}}件，合计应付:</view>
					<view class="myPages__mainFormMainButtomBox">
						<span>￥</span>
						<span>{{salesArr | ff_total}}</span>
					</view>
				</view>
			</view>


		</view>

		<view class="receiptBox" @click="copyAddress">
			<view class="receiptBoxTop">
				收货人：{{orderService.receiptName}}{{orderService.receiptPhone}}
			</view>
			<view class="receiptBoxBottom">
				<view class="receiptBoxBottomLeft">{{orderService.receiptAddress}}</view>
				<view class="receiptBoxBottomRight">复制</view>
			</view>
		</view>

		<view class="receiptBoxTT">
			<view class="receiptBoxTTTopItem">
				<span>货物状态</span>
				<span>{{orderService.serviceType==10?'退货退款':'仅退款'}}</span>
			</view>
			<view class="receiptBoxTTTopItem">
				<span>退款原因</span>
				<span>{{orderService.applyDesc ? orderService.applyDesc : '无'}}</span>
			</view>
			<view class="receiptBoxTTTopItem">
				<span>简述</span>
				<span>{{orderService.addedDesc ? orderService.addedDesc : '无'}}</span>
			</view>
			<view class="receiptBoxTTTopItem receiptBoxTTTopItemImgBox" v-if="orderService.addedImageArr.length">
				<span>图片说明</span>
				<image @click.stop="ff_previewImages(orderService.addedImageArr,threeIndex)"
					v-for="(threeItem,threeIndex) in orderService.addedImageArr" :key="threeIndex"
					class="receiptBoxTTTopItemImg" :src="threeItem"></image>
			</view>
		</view>
		<!-- 备注成功 -->
		<u-overlay :opacity="0.01" :show="isRemarkShowDui">
			<view @click.stop="" class="overlayBox">
				<image src="/static/images/duiIcon.png"></image>
				<span>提交成功</span>
			</view>
		</u-overlay>


		<!-- 申请表单区 -->
		<view class="myPages__main">
			<view class="myPages__mainBody">
				<view class="myPages__mainBodyItems" @click.stop="isShow = true">
					<view class="myPages__mainBodyItemsHeard">物流公司
						<span>*</span>
					</view>
					<input placeholder="请选择物流公司" :disabled="true" class="myPages__mainBodyItemsHeardInpt"
						:value="from.name" />
				</view>
				<view class="myPages__mainBodyItems" @click.stop="causeShow = true">
					<view class="myPages__mainBodyItemsHeard">物流单号<span>*</span></view>
					<input placeholder="请填写物流单号" :disabled="true" :value="from.cause"
						class="myPages__mainBodyItemsHeardInpt" />
				</view>

				<view :class="isBlur ? 'myPages__mainBodyButtom' : 'myPages__mainBodyButtom_act'" @click="send">提交信息
				</view>
			</view>
		</view>

		<!-- 物流公司 -->
		<u-overlay :show="isShow" @click="isShow = false">
			<view class="saleBox" @click.stop="">
				<view class="saleBox__Heard">物流公司<span>(必选)</span></view>
				<image @click.stop="isShow = false" class="saleBox__HeardImg" src="/static/images/chachaIcon.png">
					<picker-view @click.stop="" :value="regionIndex" style="width:100%;height:500rpx;"
						indicator-style="height:50px;" @change="bindRegionChange">
						<picker-view-column>
							<block v-for="(item,index) in region" :key="index">
								<view style="line-height:50px;text-align:center;">{{item.expressName}}</view>
							</block>
						</picker-view-column>
					</picker-view>
					<view @click.stop="isShow = false" :class="'saleBox__MainItem saleBox__MainItem--red'">
						确定</view>
			</view>
		</u-overlay>

		<!-- 物流单号 -->
		<u-overlay :show="causeShow" @click="causeShow = false">
			<view class="saleBox" @click.stop="">
				<view class="saleBox__Heard">物流单号<span>(必选)</span></view>
				<image @click.stop="causeShow = false" class="saleBox__HeardImg" src="/static/images/chachaIcon.png">
				</image>
				<view class="saleBox__Main">
					<textarea :show-confirm-bar="false" @click.stop="" class="saleBox__MainText" v-model="from.cause"
						placeholder="请填写物流单号…"></textarea>
					<view @click.stop="ff_causeShow"
						:class="from.cause.length == 0 ? 'saleBox__MainItem saleBox__MainItem--wthid' : 'saleBox__MainItem saleBox__MainItem--red'">
						确定</view>
				</view>
			</view>
		</u-overlay>



	</view>
</template>

<script>
	import myHeard from '@/components/myHeard/index.vue'
	let that = null;
	export default {
		components: {
			myHeard
		},
		data() {
			return {
				title: '填写物流订单',
				regionIndex: 0,
				region: [],
				from: {
					name: '',
					cause: '',
				},
				isShow: false,
				salesArr: [],
				salesId: [],
				causeShow: false,
				causeId: [],
				causeArr: [],
				orderId: '',
				isBlur: false,
				payStatus: 0,
				orderStatus: 0,
				orderService: [],
				partOrderProductList: [],
				isRemarkShowDui: false
			}
		},
		onLoad(oprtion) {
			console.log(oprtion)
			// #ifndef H5
			let search = uni.getMenuButtonBoundingClientRect()
			this.$store.commit('updataSearch', search);
			// #endif
			console.log('oprtion--->', oprtion);

			let nowoprtion = JSON.parse(oprtion.sales)
			console.log('nowoprtion--->', nowoprtion)
			this.salesArr = nowoprtion.orderProductIds;
			this.orderService = nowoprtion.orderService;
			this.partOrderProductList = [];
			this.salesArr.forEach(item => {
				if (item.productType == 20) {
					this.partOrderProductList.push(item)
				}
			})
			this.initmallExpressWxList();

		},
		computed: {
			search() {
				return this.$store.state.search;
			},

		},
		onShow() {
			that = this
		},
		watch: {
			from: {
				handler: (val, oldval) => {

					let isBlurInput = that.blurInputs();
					if (isBlurInput) {
						that.isBlur = true;
					} else {
						that.isBlur = false;
					}
					console.log('that.isBlur-->', that.isBlur)

				},
				deep: true //对象内部的属性监听，也叫深度监听  
			}
		},
		filters: {
			ff_total(arr) {
				let total = 0;
				arr.forEach(item => {
					total = total + Number(item.totalPrice);
				});
				return total;
			},
			ff_cases(arr) {
				let cases = 0;
				arr.forEach(item => {
					cases = cases + item.productNum;
				});
				return cases;
			}
		},
		methods: {
			ff_causeShow(){
				if(!this.from.cause.length){
					uni.showToast({
						title: '单号不能为空!',
						icon: 'none',
						mask:true
					});
					return;
				}
				this.causeShow = false;
			},
			ff_previewImages(myImgs, index = 0) {
				let imgs = [];
				myImgs.forEach(item => {
					imgs.push(item)
				})
				uni.previewImage({
					urls: imgs,
					current: index
				})
			},
			//调用预览图片的方法
			ff_previewImage(myImgs, index = 0) {
				uni.previewImage({
					urls: [myImgs],
					current: index
				})
			},
			initmallExpressWxList() {

				uni.showLoading({
					title: '加载中'
				});
				this.$api.mallExpressWxList().then(res => {
					if (res.code == 200) {
						this.region = res.data;
						this.from.name = this.region[this.regionIndex].expressName;
					}
				})
			},
			bindRegionChange(e) {
				console.log(e)
				this.from.name = this.region[e.detail.value[0]].expressName;
			},
			causeClicks(item) {
				this.from.cause = item.reason;
				this.causeId = item.reasonId;
				this.causeShow = false;
			},
			saleClicks(serviceType, serviceDeaice) {
				this.from.name = serviceDeaice;
				this.salesId = serviceType;
				this.isShow = false;

			},

			send() {
				let isSend = this.blurInput();
				if (isSend) return


				// let orderProductIds = []
				// this.salesArr.forEach(item => {
				// 	orderProductIds.push(item.orderProductId)
				// });
				let req = {
					expressId: this.region[this.regionIndex].expressId,
					serviceNo: this.orderService.serviceNo,
					expressNo: this.from.cause
				}

				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.$api.orderServiceWxDelivery(req).then(res => {
					if (res.code == 200) {
						// uni.showToast({
						// 	icon: 'none',
						// 	title: res.msg,
						// 	mask: true
						// });
						this.isRemarkShowDui = true;
						setTimeout(() => {
							this.isRemarkShowDui = false;
							uni.navigateBack()
						}, 1000)
					}
				})
			},
			blurInputs() {
				// console.log('this.from.name===>',this.from.name == '')
				if (this.from.name == '') {

					return false;
				}
				if (this.from.cause == '') {

					return false;
				}
				return true;

			},
			// 复制地址
			copyAddress() {
				// orderService.receiptAddress
				let that = this
				console.log(that.orderService.receiptAddress)
				uni.setClipboardData({
					data: that.orderService.receiptAddress,
					success: res => {}
				});
			},
			blurInput() {
				// console.log('this.from.name===>',this.from.name == '')
				if (this.from.name == '') {
					uni.showToast({
						title: "物流公司不能为空",
						icon: "none",
						mask: true
					})
					return true;
				}
				if (this.from.cause == '') {
					uni.showToast({
						title: "物流单号不能为空",
						icon: "none",
						mask: true
					})
					return true;
				}

			},
			goPath(url) {
				uni.navigateTo({
					url
				})
			},
			goBack() {
				uni.navigateBack()
			},
		}
	}
</script>

<style scoped lang="scss">
	.myPages {
		width: 100%;
		min-height: 100vh;
		background: #f6f7fb;
		box-sizing: border-box;
		.overlayBox {
					width: 202rpx;
					height: 90rpx;
					background: rgba(0, 0, 0, 0.9);
					border-radius: 32px;
					display: flex;
					align-items: center;
					justify-content: center;
					position: fixed;
					top: 48%;
					left: 50%;
					transform: translate(-50%, -50%);
		
					image {
						display: inline-block;
						width: 34rpx;
						height: 34rpx;
					}
		
					span {
						display: inline-block;
						height: 34rpx;
						font-size: 24rpx;
						font-family: 蘋方-簡;
						font-weight: normal;
						line-height: 34rpx;
						color: #FFFFFF;
						margin-left: 8rpx;
		
					}
				}

		.myPages__main {
			padding: 32rpx;
			width: 100%;
			box-sizing: border-box;
			padding-top: 0;
			padding-bottom: 48rpx;
		}

		.myPages__mainBody {
			width: 100%;
			background: #FFFFFF;
			box-shadow: 0px 0px 40rpx rgba(228, 228, 245, 0.4);
			opacity: 1;
			border-radius: 40rpx;
			padding: 32rpx;
			box-sizing: border-box;
		}

		.myPages__mainBodyItems {
			height: 88rpx;
			display: flex;
			border-bottom: 3rpx solid #F0F2F8;
			align-items: center;
			font-size: 14px;
			font-family: 'DIN';
			font-weight: normal;
			line-height: 20px;
			color: #2B2B33;
			position: relative;

		}

		.textareaH {
			flex-direction: column;
			height: 400rpx;
		}

		.myPages__mainBodyItemsHeardH {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
		}

		.where {
			height: 90rpx;
			line-height: 90rpx;
			position: absolute;
			left: 157rpx;
			top: 0;
		}

		.myPages__mainBodyItemsHeard {
			flex: 1;

			span {
				color: #f0414d;
				position: relative;
				right: -1px;
				top: -4px;
				font-size: 34rpx;
				font-weight: 550;

			}
		}

		.myPages__mainBodyItemsHeardInptH {
			width: 100%;
			height: 283rpx;
			background: #F0F2F8;
			border-radius: 24rpx;
			padding: 32rpx;
			box-sizing: border-box;
			color: #000;
		}

		.myPages__mainBodyItemsHeardInpt {
			flex: 3;

		}

		.myPages__mainBodyItemsCatIem {
			width: 40rpx;
			height: 40rpx;
		}

		.saleBox {
			bottom: 0;
			margin: 32rpx;
			margin-bottom: 48rpx;
			width: 686rpx;
			background-color: #FFFFFF;
			border-radius: 40rpx;
			padding: 32rpx;
			box-sizing: border-box;
			position: absolute;
			bottom: 0;

		}

		.saleBox__HeardImg {
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			top: 32rpx;
			right: 32rpx;
		}

		.saleBox__MainItem {
			height: 104rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			line-height: 104rpx;
			background: #f7f8fc;
			opacity: 1;
			border-radius: 32rpx;
			font-size: 28rpx;
			font-family: 'DIN';
			font-weight: normal;
			color: #2B2B33;
			margin-top: 24rpx;

			span:nth-child(2) {
				font-size: 22rpx;
				font-family: 'DIN';
				color: #7b7d8d;
			}

		}

		.saleBox__MainItem--wthid {
			background: #dedfe3;
			color: #FFFFFF;
		}

		.saleBox__MainItem--red {
			background: #f44b5b;
			color: #FFFFFF;
			box-shadow: 0 28rpx 22rpx -26rpx #F44B5B;
		}

		.saleBox__Heard {
			width: 100%;
			height: 48rpx;
			font-size: 28rpx;
			font-family: 'DIN';
			font-weight: normal;
			line-height: 48rpx;
			color: #2B2B33;
			text-align: center;

		}

		.saleBox__MainText {
			width: 100%;
			border-radius: 40rpx;
			font-size: 28rpx;
			margin-top: 24rpx;
			background-color: #f7f8fc;
			padding: 32rpx;
			box-sizing: border-box;
		}

		.saleBox__Heard {
			width: 100%;
			height: 48rpx;
			font-size: 28rpx;
			font-family: 'DIN';
			font-weight: normal;
			line-height: 48rpx;
			color: #2B2B33;
			text-align: center;

			span {
				font-size: 23rpx;
				font-family: 'DIN';
				font-weight: normal;
				color: #7B7D8D;
			}

		}

		.myPages__mainBodyButtom {
			width: 622rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: #F44B5B;
			color: #FFFFFF;
			opacity: 1;
			text-align: center;
			border-radius: 40rpx;
			font-size: 28rpx;
			font-family: 'DIN';
			font-weight: normal;
			margin-top: 32rpx;
			box-shadow: 0 28rpx 22rpx -26rpx #F44B5B;
		}

		.myPages__mainBodyButtom_act {
			width: 622rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: #dedfe3;
			color: #FFFFFF;
			opacity: 1;
			text-align: center;
			border-radius: 40rpx;
			font-size: 28rpx;
			font-family: 'DIN';
			font-weight: normal;
			margin-top: 32rpx;
		}


		.myPages__mainForm {
			width: 686rpx;
			padding: 20rpx 32rpx;
			box-sizing: border-box;
			border-radius: 40rpx;
			background-color: #FFFFFF;
			margin: 20rpx 32rpx;
		}

		.myPages__mainFormHaerd {
			display: flex;
			justify-content: space-between;
			height: 40rpx;
			align-items: center;

			span {
				height: 34rpx;
				font-size: 24rpx;
				font-family: 'DIN';
				font-weight: normal;
				line-height: 34rpx;
				color: #B0B1BB;
				opacity: 1;
			}

		}

		.myPages__mainFormHaerdLeft {
			display: flex;
			height: 40rpx;
			align-items: center;
		}

		.myPages__mainFormMain {
			padding-top: 20rpx;
		}

		.receiptBoxTT {
			width: 686rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 40rpx rgba(228, 228, 245, 0.4);
			opacity: 1;
			border-radius: 40rpx;
			box-sizing: border-box;
			padding: 32rpx;
			margin: 0 32rpx;
			margin-bottom: 20rpx;
		}


		.receiptBoxTTTopItem {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 16rpx 0;

			&>span:nth-child(1) {
				height: 40rpx;
				font-size: 28rpx;
				font-family: 'DIN';
				font-weight: normal;
				line-height: 40rpx;
				color: #2B2B33;
				flex: 0 0 150rpx;

			}

			&>span:nth-child(2) {
				font-size: 28rpx;
				font-family: 'DIN';
				font-weight: normal;
				color: #7B7D8D;
				flex: 1;
				text-align: right;

			}
		}

		.receiptBoxTTTopItemImgBox {}

		.receiptBoxTTTopItemImg {
			width: 140rpx;
			height: 140rpx;
			border-radius: 20rpx;
		}

		.receiptBox {
			margin: 0 32rpx;
			margin-bottom: 20rpx;
			width: 686rpx;
			height: 154rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 40rpx rgba(228, 228, 245, 0.4);
			opacity: 1;
			border-radius: 40rpx;
			box-sizing: border-box;
			padding: 32rpx;
		}

		.receiptBoxTop {
			height: 40rpx;
			font-size: 28rpx;
			font-family: 'DIN';
			font-weight: normal;
			line-height: 40rpx;
			color: #2B2B33;
			opacity: 1;
		}

		.receiptBoxBottom {
			color: #000;
			display: flex;
			justify-content: space-between;
			margin-top: 12rpx;
		}

		.receiptBoxBottomLeft {
			height: 34rpx;
			font-size: 24rpx;
			font-family: 'DIN';
			font-weight: normal;
			line-height: 34rpx;
			color: #7B7D8D;
			flex: 1;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.receiptBoxBottomRight {
			flex: 0 0 60rpx;
			text-align: center;
			height: 34rpx;
			font-size: 19rpx;
			font-family: 'DIN';
			font-weight: normal;
			line-height: 30rpx;
			padding: 0 7rpx;
			color: #7B7D8D;
			box-sizing: border-box;
			border: 2rpx solid #7B7D8D;
		}

		.myPages__mainFormMainButtom {
			display: flex;
			justify-content: flex-end;
			align-items: flex-end;
		}

		.myPages__mainFormMainButtomText {
			height: 34rpx;
			font-size: 24rpx;
			font-family: 'DIN';
			font-weight: normal;
			line-height: 34rpx;
			color: #B0B1BB;
			opacity: 1;
			margin-right: 10rpx;
		}

		.myPages__mainFormMain {
			padding-top: 20rpx;
		}

		.myPages__mainFormMainButtom {
			display: flex;
			justify-content: flex-end;
			align-items: flex-end;
		}

		.myPages__mainFormMainButtomText {
			height: 34rpx;
			font-size: 24rpx;
			font-family: 'DIN';
			font-weight: normal;
			line-height: 34rpx;
			color: #B0B1BB;
			opacity: 1;
			margin-right: 10rpx;
		}

		.myPages__mainFormMainButtomBox {
			span {
				display: inline-block;
				font-family: 'DIN';
				font-weight: normal;
				color: #F0414D;
				font-size: 32rpx;
			}

			span:nth-child(1) {
				font-size: 24rpx;
			}
		}


		.myPages__mainFormMainItem {
			width: 100%;
			background-color: #F0F2F8;
			border-radius: 24rpx;
			overflow: hidden;
			margin-bottom: 24rpx;

		}

		.myPages__mainFormMainItemName {
			height: 50rpx;
			font-size: 24rpx;
			font-family: 'DIN';
			font-weight: normal;
			line-height: 50rpx;
			color: #7B7D8D;
			opacity: 1;
			padding: 0 24rpx;
		}

		.myPages__mainFormMainItemBody {
			background: #FFFFFF;
			border: 2rpx solid #F0F2F8;
			opacity: 1;
			border-radius: 24rpx;
			padding: 24rpx;
			box-sizing: border-box;
		}

		.myPages__mainFormMainItemBodyTopImg {
			width: 112rpx;
			height: 112rpx;
		}


		.myPages__mainFormMainItemBodyTop {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;
		}

		.myPages__mainFormMainItemBodyTopImgs {
			width: 136rpx;
			height: 136rpx;
			
		}
		.myPages__mainFormMainItemBodyTopImgs{
			transform: scale(1.5);
		}

		.myPages__mainFormMainItemBodyTop:last-child {
			margin-bottom: 0 !important;
		}

		.ssmyPages__mainFormMainItemBodyTopImgs {
			width: 92rpx;
			height: 92rpx;
		}

		.myHandbag__mainItemCenBoxJjieMainImg01 {
			width: 56rpx;
			height: 56rpx;
		}

		.myHandbag__mainItemCenBoxJjieMainImg02 {
			width: 56rpx;
			height: 56rpx;
		}

		.myPages__mainFormMainItemBodyTopImgBox {
			width: 136rpx;
			flex: 0 0 136rpx;
			height: 136rpx;
			border-radius: 24rpx;
			overflow: hidden;
			background-color: #f7f8fc;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.myHandbag__mainItemCenBoxJjieMainNum {
			font-size: 24rpx;
			font-family: 'DIN';
			font-weight: normal;
			color: #7B7D8D;
			opacity: 1;
			line-height: 49rpx;
			text-align: center;
			display: flex;
			/* align-items: stretch; */
			margin-left: 10rpx;

			span {
				font-size: 25rpx;
				font-family: 'DIN';
				font-weight: normal;
				color: #7B7D8D;
				opacity: 1;
			}
		}

		.myPages__mainFormMainItemBodyBottomx {
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			flex: 1;

			p {
				font-size: 24rpx;
				font-family: 'DIN';
				font-weight: normal;
				color: #7B7D8D;
				opacity: 1;
			}

			.myPages__mainFormMainItemBodyBottomxItems {
				display: flex;
				height: 44rpx;
				font-size: 32rpx;
				font-family: 'DIN';
				font-weight: normal;
				line-height: 44rpx;
				color: #2B2B33;
			}
		}

		.myPages__mainFormMainItemBodyBottom {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 24rpx;
			height: 110rpx;
		}

		.myPages__mainFormMainItemBodyBottomImgBox {
			flex: 1;
			margin-right: 34rpx;
			display: flex;
			justify-content: space-between;
		}

	}
</style>
